<template>
  <div class="home">
    <div class="top">
      <div class="left">
        <span class="lbtn" @click="goHome">首页</span>
      </div>
      <div class="center">
        <div class="title">智慧餐厅可视化大数据平台</div>
      </div>
      <div class="right">
        <span class="rbtn">统计报告</span>
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card shadow="hover" style="background: url(./images/bg1.png)">
          <div class="button">
            <el-icon @click="goHome">
              <Back />
            </el-icon>
          </div>
          <div id="bar2" ref="barChart2"></div>
        </el-card>

        <el-card
          class="table"
          shadow="always"
          style="margin-bottom: 50px; background: url(./images/bg1.png)"
        >
          <el-table
            :data="dateinformation1"
            :default-sort="{ prop: 'sales', order: 'descending' }"
            style="width: 100%"
          >
            <el-table-column prop="foodname" label="食物名称" width="180" />
            <el-table-column prop="date" label="日销售量" width="180">
              <template #default="{ row }">
                {{ row.date.length ? row.date[row.date.length - 1].number : '暂无销量' }}
              </template>
            </el-table-column>
            <el-table-column prop="sales" sortable label="总销售量" width="180" />
          </el-table>
        </el-card>

        <div class="bar-pie1">
          <el-card style="width: 100%; height: 300px; background: url(./images/bg1.png)">
            <div id="bar1" ref="barChart1"></div>
          </el-card>
        </div>
        <el-card shadow="hover" style="background: url(./images/bg1.png)">
          <div class="block">
            <span style="color: white">请选择查看的日期：</span>

            <el-date-picker
              v-model="value2"
              type="date"
              placeholder="选择日期:"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
              @change="handleDateChange"
            />
          </div>
          <div id="bar4" ref="barChart4"></div>
        </el-card>
        <!-- <div class="bar-pie1">

                    <el-card style="width: 100%; height: 300px; ">
                        <div id="bar2" ref="barChart2"></div>
                    </el-card>


                </div> -->
      </el-col>

      <el-col :span="16">
        <el-card
          style="width: 100%; height: 500px; margin-bottom: 20px; background: url(./images/bg1.png)"
        >
          <div id="line" ref="lineChart"></div>
        </el-card>

        <el-card
          style="width: 100%; height: 350px; margin-bottom: 30px; background: url(./images/bg1.png)"
        >
          <div id="line1" ref="lineChart1"></div>
        </el-card>

        <div class="bar-pie">
          <el-card style="width: 49%; height: 300px; background: url(./images/bg1.png)">
            <div id="bar" ref="barChart"></div>
          </el-card>

          <el-card style="width: 49%; height: 300px; background: url(./images/bg1.png)">
            <div id="pie" ref="pieChart"></div>
          </el-card>
        </div>

        <div class="bar-pie2">
          <el-card style="width: 100%; height: 330px; background: url(./images/bg1.png)">
            <div id="pie1" ref="pieChart1"></div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import axios from 'axios'
import { useRouter, useRoute } from 'vue-router'
import { reactive, ref, onMounted } from 'vue'
import 'echarts-liquidfill'
const router = useRouter()
const route = useRoute()

const reviewmenu = ref([])
const size = ref<'default' | 'large' | 'small'>('default')

const value2 = ref('')

const goHome = () => {
  router.push('/AppLayout1')
}
type allinformation = {
  //餐厅日销售
  month: string
  date: string
  number: string
  person: string
  avgprice: string
  money: string
}
type allinformation1 = {
  //菜品日销售
  foodid: string
  restaurantid: string
  image: string
  price: string
  vipprice: string
  introduction: string
  sales: string
  state: string
  foodname: string
  date: DateInfo[]
}
type DateInfo = {
  month: string
  date: string
  number: string
  person: string
  avgprice: string
  money: string
}
const dateinformation = ref([] as allinformation[])
const dateinformation1 = ref([] as allinformation1[])
const dateinformation2 = ref([] as allinformation[])
const dateinformation3 = ref([] as allinformation1[])
const fetchData = () => {
  //餐厅日销售
  axios({
    method: 'POST',
    params: {
      restaurantid: window.localStorage.getItem('restaurantID')
    },
    url: 'http://localhost:8080/data/daydata',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('RestaurantToken')
    }
  }).then((res) => {
    const { data } = res
    dateinformation.value = data.data
    console.log(res)
  })
}
const fetchData1 = () => {
  //菜品日销售
  axios({
    method: 'POST',
    params: {
      restaurantid: window.localStorage.getItem('restaurantID')
    },
    url: 'http://localhost:8080/data/dayfood',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('RestaurantToken')
    }
  }).then((res) => {
    const { data } = res
    dateinformation1.value = data.data
    // console.log(res)
    drawCharts()
  })
}
const fetchData2 = () => {
  //餐厅月销售
  axios({
    method: 'POST',
    params: {
      restaurantid: window.localStorage.getItem('restaurantID')
    },
    url: 'http://localhost:8080/data/monthdata',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('RestaurantToken')
    }
  }).then((res) => {
    const { data } = res
    dateinformation2.value = data.data
    console.log(res)
    drawCharts()
  })
}
const fetchData3 = () => {
  //菜品月销售
  axios({
    method: 'POST',
    params: {
      restaurantid: window.localStorage.getItem('restaurantID')
    },
    url: 'http://localhost:8080/data/monthfood',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('RestaurantToken')
    }
  }).then((res) => {
    const { data } = res
    dateinformation3.value = data.data
    //console.log("adsdasdsadsadsadsad" + data.data)
    drawCharts()
  })
}
type allinformation11 = {
  //餐厅日销售
  userid: string
  usertypeid: string
  username: string
  password: string
  image: string
  phone: string
  createtime: string
  updatetime: string
  gender: string
  vip: string
  expiretime: string
  age: string
  state: string
  number: string
}
const foodmenu2 = ref([] as allinformation11[])
const fetchData4 = () => {
  //评价投诉
  axios({
    method: 'POST',
    params: {
      restaurantid: window.localStorage.getItem('restaurantID')
    },
    url: 'http://localhost:8080/restaurant/getclient',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('RestaurantToken')
    }
  }).then((res) => {
    const { data } = res
    foodmenu2.value = data.data
  })
}
const aqiData = ref(120) // 使用 ref 创建响应式数据
const handleDateChange = () => {
  // 获取用户选择的日期
  const selectedDate = value2.value
  console.log(selectedDate)
  // 在 dateinformation 中找到对应日期的数据
  const selectedData = dateinformation.value.find((item) => item.date === selectedDate)

  // 如果找到了对应日期的数据，则更新 aqiData
  if (selectedData) {
    aqiData.value = parseFloat(selectedData.number)
    console.log(aqiData.value)
    drawCharts()
  }
}
onMounted(() => {
  fetchData()
  fetchData1()
  fetchData2()
  fetchData3()
  fetchData4()
  handleDateChange()
})

const drawCharts = () => {
  const lineChart = echarts.init(document.getElementById('line'))
  const barChart = echarts.init(document.getElementById('bar'))
  const pieChart = echarts.init(document.getElementById('pie'))
  const lineChart1 = echarts.init(document.getElementById('line1'))
  const barChart1 = echarts.init(document.getElementById('bar1'))
  const pieChart1 = echarts.init(document.getElementById('pie1'))
  const barChart2 = echarts.init(document.getElementById('bar2'))
  const barChart4 = echarts.init(document.getElementById('bar4'))
  //console.log(dateinformation1.value)
  // 从 dateinformation1 中提取数据
  const xAxisData = dateinformation1.value[0].date.map((date) => date.date) // 假设每个 foodname 的日期相同
  const legendData = dateinformation1.value.map((item) => item.foodname)
  const seriesData = dateinformation1.value.map((item) => {
    // 生成随机颜色
    const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16)

    return {
      name: item.foodname,
      type: 'line',
      symbolSize: 10,
      symbol: 'circle',
      itemStyle: {
        color: randomColor // 使用随机颜色
      },
      markPoint: {
        label: {
          normal: {
            textStyle: {
              color: '#fff'
            }
          }
        },
        data: [
          {
            type: 'max',
            name: '最大值'
          },
          {
            type: 'min',
            name: '最小值'
          }
        ]
      },
      data: item.date.map((date) => date.number) // 使用 date 中的 number 数据
    }
  })

  // 绘制折线图
  lineChart.setOption({
    title: {
      text: '菜品销售趋势',
      textStyle: {
        //文字颜色
        color: '#ccc',
        //字体风格,'normal','italic','oblique'
        fontStyle: 'normal',
        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
        fontWeight: 'bold',
        //字体系列
        fontFamily: 'sans-serif',
        //字体大小
        fontSize: 18
      }
    },
    backgroundColor: '#1A1835',

    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        textStyle: {
          color: '#fff'
        }
      }
    },
    grid: {
      borderWidth: 0,
      top: 160,
      bottom: 95,
      left: 30,
      right: 30,
      textStyle: {
        color: '#fff'
      }
    },
    legend: {
      x: '1%',
      top: '10%',
      textStyle: {
        color: '#fff'
      },
      data: legendData
    },

    toolbox: {
      //工具栏,内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
      feature: {
        //各工具配置项。
        dataView: {
          //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
          show: true, //是否显示组件。
          readOnly: false,
          optionToContent: function (opt) {
            var axisData = opt.xAxis[0].data
            var series = opt.series
            var table = '<table style="width:100%;text-align:center"><tbody><tr>' + '<td>日期</td>'
            for (var i = 0, l = series.length; i < l; i++) {
              table += '<td>' + series[i].name + '</td>'
            }

            for (var i = 0, l = axisData.length; i < l; i++) {
              table += '<tr>' + '<td>' + axisData[i] + '</td>'

              // 内部循环：根据 series 动态生成数据列
              for (var j = 0, len = series.length; j < len; j++) {
                table += '<td>' + series[j].data[i] + '</td>'
              }

              table += '</tr>'
            }

            table += '</tbody></table>'
            return table
          }
        },
        magicType: {
          //动态类型切换 示例：feature: { magicType: {type: ['line', 'bar', 'stack', 'tiled']}}
          show: true,
          type: ['line', 'bar', 'stack', 'tiled']
        },
        restore: {
          //配置项还原。
          show: true
        },
        saveAsImage: {
          //保存为图片。
          show: true
        }
      }
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        axisLine: {
          lineStyle: {
            color: 'rgba(204,187,225,0.5)'
          }
        },
        axisLabel: {
          // 坐标轴标签样式
          color: '#fff', // 坐标轴标签文字颜色
          fontSize: 12 // 坐标轴标签文字大小
          // 其他坐标轴标签样式设置...
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        data: xAxisData
      }
    ],

    yAxis: [
      {
        type: 'value',
        splitLine: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(204,187,225,0.5)'
          }
        },
        axisLabel: {
          // 坐标轴标签样式
          color: '#fff', // 坐标轴标签文字颜色
          fontSize: 12 // 坐标轴标签文字大小
          // 其他坐标轴标签样式设置...
        }
      }
    ],
    dataZoom: [
      {
        show: true,
        height: 30,
        xAxisIndex: [0],
        bottom: 30,

        start: 10,
        end: 80,
        handleIcon:
          'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
        handleSize: '110%',
        handleStyle: {
          color: '#5B3AAE'
        },
        textStyle: {
          color: 'rgba(204,187,225,0.5)'
        },
        fillerColor: 'rgba(67,55,160,0.4)',
        borderColor: 'rgba(204,187,225,0.5)'
      },
      {
        type: 'inside',
        show: true,
        height: 15,
        start: 1,
        end: 35
      }
    ],
    series: seriesData
  })

  const dateList = dateinformation.value.map((item) => item.date)
  const valueList = dateinformation.value.map((item) => item.person)
  const valueList1 = dateinformation.value.map((item) => item.avgprice)
  var data_val = valueList1,
    xAxis_val = dateList

  // 绘制折线图
  lineChart1.setOption({
    title: {
      text: '餐厅人均消费',
      textStyle: {
        //文字颜色
        color: '#ccc',
        //字体风格,'normal','italic','oblique'
        fontStyle: 'normal',
        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
        fontWeight: 'bold',
        //字体系列
        fontFamily: 'sans-serif',
        //字体大小
        fontSize: 18
      }
    },
    toolbox: {
      //工具栏,内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
      feature: {
        //各工具配置项。
        dataView: {
          //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
          show: true, //是否显示组件。
          readOnly: false,
          optionToContent: function (opt) {
            var axisData = opt.xAxis[0].data
            var series = opt.series
            var table = '<table style="width:100%;text-align:center"><tbody><tr>' + '<td>日期</td>'
            for (var i = 0, l = series.length; i < l; i++) {
              table += '<td>' + series[i].name + '</td>'
            }

            for (var i = 0, l = axisData.length; i < l; i++) {
              table += '<tr>' + '<td>' + axisData[i] + '</td>'

              // 内部循环：根据 series 动态生成数据列
              for (var j = 0, len = series.length; j < len; j++) {
                table += '<td>' + series[j].data[i] + '</td>'
              }

              table += '</tr>'
            }

            table += '</tbody></table>'
            return table
          }
        },
        magicType: {
          //动态类型切换 示例：feature: { magicType: {type: ['line', 'bar', 'stack', 'tiled']}}
          show: true,
          type: ['line', 'bar', 'stack', 'tiled']
        },
        restore: {
          //配置项还原。
          show: true
        },
        saveAsImage: {
          //保存为图片。
          show: true
        }
      }
    },
    backgroundColor: '#293042',
    grid: {
      left: 10,
      top: 30,
      bottom: 0,
      right: 40,
      containLabel: true
    },
    tooltip: {
      show: true,
      backgroundColor: '#384157',
      borderColor: '#384157',
      borderWidth: 1,
      formatter: '{b}:{c}',
      extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 1)'
    },

    xAxis: {
      data: xAxis_val,
      boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      },
      axisLabel: {
        // 坐标轴标签样式
        color: '#fff', // 坐标轴标签文字颜色
        fontSize: 12 // 坐标轴标签文字大小
        // 其他坐标轴标签样式设置...
      },
      axisTick: {
        show: true
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      }
    },
    yAxis: {
      ayisLine: {
        show: false
      },
      axisLabel: {
        // 坐标轴标签样式
        color: '#fff', // 坐标轴标签文字颜色
        fontSize: 12 // 坐标轴标签文字大小
        // 其他坐标轴标签样式设置...
      },
      splitLine: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      }
    },

    series: [
      {
        type: 'line',
        name: '人数',
        smooth: true,
        symbolSize: 15,
        animation: false,
        lineWidth: 1.2,
        hoverAnimation: false,
        data: data_val,
        symbol: 'circle',
        lineStyle: {
          normal: {
            //主线
            width: 5,
            color: '#01f8f3',
            shadowColor: '#000',
            shadowBlur: 15,
            shadowOffsetY: 5
          }
        },
        itemStyle: {
          normal: {
            color: '#01f8f3',
            borderWidth: 3,

            borderColor: '#fff',
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#06efec'
              }
            }
          }
        },

        areaStyle: {
          normal: {
            color: '#06efec',
            opacity: 0.08
          }
        }
      }
    ]
  })

  // 绘制柱状图
  barChart.setOption({
    title: {
      text: '餐厅日营业额',
      textStyle: {
        //文字颜色
        color: '#ccc',
        //字体风格,'normal','italic','oblique'
        fontStyle: 'normal',
        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
        fontWeight: 'bold',
        //字体系列
        fontFamily: 'sans-serif',
        //字体大小
        fontSize: 18
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      //工具栏,内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
      feature: {
        //各工具配置项。
        dataView: {
          //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
          show: true, //是否显示组件。
          readOnly: false,
          optionToContent: function (opt) {
            var axisData = opt.yAxis[0].data
            var series = opt.series
            var table = '<table style="width:100%;text-align:center"><tbody><tr>' + '<td>时间</td>'
            for (var i = 0, l = series.length; i < l; i++) {
              table += '<td>' + series[i].name + '</td>'
            }

            for (var i = 0, l = axisData.length; i < l; i++) {
              table += '<tr>' + '<td>' + axisData[i] + '</td>'

              // 内部循环：根据 series 动态生成数据列
              for (var j = 0, len = series.length; j < len; j++) {
                table += '<td>' + series[j].data[i] + '</td>'
              }

              table += '</tr>'
            }

            table += '</tbody></table>'
            return table
          }
        },
        magicType: {
          //动态类型切换 示例：feature: { magicType: {type: ['line', 'bar', 'stack', 'tiled']}}
          show: true,
          type: ['line', 'bar']
        },
        restore: {
          //配置项还原。
          show: true
        },
        saveAsImage: {
          //保存为图片。
          show: true
        }
      }
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      axisLabel: {
        // 坐标轴标签样式
        color: '#fff', // 坐标轴标签文字颜色
        fontSize: 12 // 坐标轴标签文字大小
        // 其他坐标轴标签样式设置...
      }
    },
    yAxis: {
      type: 'category',
      data: dateinformation.value.map((item) => item.date),
      axisLabel: {
        // 坐标轴标签样式
        color: '#fff', // 坐标轴标签文字颜色
        fontSize: 12 // 坐标轴标签文字大小
        // 其他坐标轴标签样式设置...
      }
    },
    series: [
      {
        name: '营业额',
        type: 'bar',
        data: dateinformation.value.map((item) => parseFloat(item.money)) // 使用餐厅销售数据的营业额
      },
      {
        name: '订单总数目',
        type: 'bar',
        data: dateinformation.value.map((item) => parseFloat(item.number))
      }
    ]
  })

  // 绘制柱状图
  barChart1.setOption({
    title: {
      text: '餐厅月营业额',
      textStyle: {
        //文字颜色
        color: '#ccc',
        //字体风格,'normal','italic','oblique'
        fontStyle: 'normal',
        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
        fontWeight: 'bold',
        //字体系列
        fontFamily: 'sans-serif',
        //字体大小
        fontSize: 18
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      //工具栏,内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
      feature: {
        //各工具配置项。
        dataView: {
          //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
          show: true, //是否显示组件。
          readOnly: false,
          optionToContent: function (opt) {
            var axisData = opt.xAxis[0].data
            var series = opt.series
            var table = '<table style="width:100%;text-align:center"><tbody><tr>' + '<td>月份</td>'
            for (var i = 0, l = series.length; i < l; i++) {
              table += '<td>' + series[i].name + '</td>'
            }

            for (var i = 0, l = axisData.length; i < l; i++) {
              table += '<tr>' + '<td>' + axisData[i] + '</td>'

              // 内部循环：根据 series 动态生成数据列
              for (var j = 0, len = series.length; j < len; j++) {
                table += '<td>' + series[j].data[i] + '</td>'
              }

              table += '</tr>'
            }

            table += '</tbody></table>'
            return table
          }
        },
        magicType: {
          //动态类型切换 示例：feature: { magicType: {type: ['line', 'bar', 'stack', 'tiled']}}
          show: true,
          type: ['line', 'bar', 'stack', 'tiled']
        },
        restore: {
          //配置项还原。
          show: true
        },
        saveAsImage: {
          //保存为图片。
          show: true
        }
      }
    },
    xAxis: [
      {
        type: 'category',
        data: dateinformation2.value.map((item) => item.month),
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          // 坐标轴标签样式
          color: '#fff', // 坐标轴标签文字颜色
          fontSize: 12 // 坐标轴标签文字大小
          // 其他坐标轴标签样式设置...
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          // 坐标轴标签样式
          color: '#fff', // 坐标轴标签文字颜色
          fontSize: 12 // 坐标轴标签文字大小
          // 其他坐标轴标签样式设置...
        }
      }
    ],
    series: [
      {
        name: '营业额',
        type: 'bar',
        barWidth: '60%',
        data: dateinformation2.value.map((item) => parseFloat(item.money))
      }
    ]
  })

  // const totalSales = dateinformation3.value.reduce((acc, item) => acc + parseFloat(item.date[0].money), 0);

  // const seriesData3 = dateinformation3.value.map(item => {
  //     const value = parseFloat(item.date[0].money);
  //     const percentage = totalSales ? ((value / totalSales) * 100).toFixed(2) : 0; // 计算比重
  //     return {
  //         value: percentage,
  //         name: item.foodname,
  //     };
  // });
  // // 绘制柱状图
  // barChart2.setOption({
  //     title: {
  //         text: 'Funnel'
  //     },
  //     tooltip: {
  //         trigger: 'item',
  //         formatter: '{a} <br/>{b} : {c}%'
  //     },
  //     toolbox: {
  //         feature: {
  //             dataView: { readOnly: false },
  //             restore: {},
  //             saveAsImage: {}
  //         }
  //     },
  //     legend: {
  //         data: dateinformation3.value.map(item => item.foodname),
  //     },

  //     series: [
  //         {
  //             name: 'Funnel',
  //             type: 'funnel',
  //             left: '10%',
  //             top: 60,
  //             bottom: 60,
  //             width: '80%',
  //             min: 0,
  //             max: 100,
  //             minSize: '0%',
  //             maxSize: '100%',
  //             sort: 'descending',
  //             gap: 6,
  //             label: {
  //                 show: true,
  //                 position: 'inside'
  //             },
  //             labelLine: {
  //                 length: 10,
  //                 lineStyle: {
  //                     width: 1,
  //                     type: 'solid'
  //                 }
  //             },
  //             itemStyle: {
  //                 borderColor: '#fff',
  //                 borderWidth: 1
  //             },
  //             emphasis: {
  //                 label: {
  //                     fontSize: 20
  //                 }
  //             },
  //             data: seriesData3
  //         }
  //     ]
  // });

  const pieChartData = dateinformation1.value.map((item) => {
    return {
      value: item.sales,
      name: item.foodname
    }
  })
  // 计算饼图的中心位置
  const centerX = '50%' // 水平方向居中
  const centerY = '65%' // 垂直方向向下偏移一定距离
  // 绘制饼图
  pieChart.setOption({
    title: {
      text: '餐厅总销售量构成', //销售趋势
      textStyle: {
        //文字颜色
        color: '#ccc',
        //字体风格,'normal','italic','oblique'
        fontStyle: 'normal',
        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
        fontWeight: 'bold',
        //字体系列
        fontFamily: 'sans-serif',
        //字体大小
        fontSize: 18
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '10%',
      left: 'center',
      textStyle: {
        color: '#fff'
      }
    },
    toolbox: {
      //工具栏,内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
      feature: {
        //各工具配置项。
        dataView: {
          //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
          show: true, //是否显示组件。
          readOnly: false
        },

        restore: {
          //配置项还原。
          show: true
        },
        saveAsImage: {
          //保存为图片。
          show: true
        }
      }
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        center: [centerX, centerY], // 设置饼图的中心位置
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: pieChartData
      }
    ]
  })

  const legendData1 = dateinformation3.value.map((item) => item.foodname)

  const seriesData1 = dateinformation3.value.map((item) => {
    return {
      value: item.date[0].number, // 使用 date 中的 number 数据
      name: item.foodname
    }
  })
  const seriesData2 = dateinformation3.value.map((item) => {
    return {
      value: item.date[1].number, // 使用 date 中的 number 数据
      name: item.foodname
    }
  })
  // 绘制饼图
  pieChart1.setOption({
    title: {
      text: '菜品月销售量',

      left: 'center',
      textStyle: {
        //文字颜色
        color: '#ccc',
        //字体风格,'normal','italic','oblique'
        fontStyle: 'normal',
        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
        fontWeight: 'bold',
        //字体系列
        fontFamily: 'sans-serif',
        //字体大小
        fontSize: 18
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },

    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    series: [
      {
        name: '四月',
        type: 'pie',
        radius: [20, 140],
        center: ['25%', '50%'],
        roseType: 'radius',
        itemStyle: {
          borderRadius: 5
        },
        legend: {
          left: 'center',
          top: 'bottom',
          data: legendData1
        },

        emphasis: {
          label: {
            show: true
          }
        },
        data: seriesData1
      },
      {
        name: '五月',
        type: 'pie',
        radius: [20, 140],
        center: ['75%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 5
        },
        data: seriesData2
      }
    ]
  })
  var colorList = [
    [
      '#ff7f50',
      '#87cefa',
      '#da70d6',
      '#32cd32',
      '#6495ed',
      '#ff69b4',
      '#ba55d3',
      '#cd5c5c',
      '#ffa500',
      '#40e0d0',
      '#1e90ff',
      '#ff6347',
      '#7b68ee',
      '#d0648a',
      '#ffd700',
      '#6b8e23',
      '#4ea397',
      '#3cb371',
      '#b8860b',
      '#7bd9a5'
    ],
    [
      '#ff7f50',
      '#87cefa',
      '#da70d6',
      '#32cd32',
      '#6495ed',
      '#ff69b4',
      '#ba55d3',
      '#cd5c5c',
      '#ffa500',
      '#40e0d0',
      '#1e90ff',
      '#ff6347',
      '#7b68ee',
      '#00fa9a',
      '#ffd700',
      '#6b8e23',
      '#ff00ff',
      '#3cb371',
      '#b8860b',
      '#30e0e0'
    ],
    [
      '#929fff',
      '#9de0ff',
      '#ffa897',
      '#af87fe',
      '#7dc3fe',
      '#bb60b2',
      '#433e7c',
      '#f47a75',
      '#009db2',
      '#024b51',
      '#0780cf',
      '#765005',
      '#e75840',
      '#26ccd8',
      '#3685fe',
      '#9977ef',
      '#f5616f',
      '#f7b13f',
      '#f9e264',
      '#50c48f'
    ]
  ][2]

  const seriesData11 = foodmenu2.value.map((item, index) => {
    return {
      // 使用 date 中的 number 数据
      name: item.username,
      value: item.number,
      symbolSize: 50,
      draggable: true,
      itemStyle: {
        normal: { shadowBlur: 10, shadowColor: colorList[index], color: colorList[index] }
      }
    }
  })
  // 绘制柱状图
  barChart2.setOption({
    // 图表标题
    title: {
      show: true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
      text: '回头客消费次数', //主标题文本，'\n'指定换行
      x: 'center', // 水平安放位置，默认为左对齐，可选为：
      // 'center' ¦ 'left' ¦ 'right'
      // ¦ {number}（x坐标，单位px）
      y: 'top', // 垂直安放位置，默认为全图顶端，可选为：
      // 'top' ¦ 'bottom' ¦ 'center'
      // ¦ {number}（y坐标，单位px）
      //textAlign: null          // 水平对齐方式，默认根据x设置自动调整
      //backgroundColor: 'rgba(0,0,0,0)',
      borderColor: '#ccc', // 标题边框颜色
      borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
      padding: 5, // 标题内边距，单位px，默认各方向内边距为5，
      // 接受数组分别设定上右下左边距，同css
      itemGap: 10, // 主副标题纵向间隔，单位px，默认为10，
      textStyle: {
        fontSize: 18,
        fontWeight: 'bolder',
        color: '#eee' // 主标题文字颜色
      },
      subtextStyle: {
        color: '#aaa' // 副标题文字颜色
      }
    },

    tooltip: {},
    animationDurationUpdate: function (idx) {
      // 越往后的数据延迟越大
      return idx * 100
    },
    animationEasingUpdate: 'bounceIn',
    color: ['#fff', '#fff', '#fff'],
    series: [
      {
        type: 'graph',
        layout: 'force',
        force: {
          repulsion: 250,
          edgeLength: 10
        },
        roam: true,
        label: {
          normal: {
            show: true
          }
        },

        data: seriesData11
      }
    ]
  })
  barChart2.on('click', function (params) {
    console.log(params.name)
    window.open('https://www.baidu.com')
  })

  barChart4.setOption({
    backgroundColor: 'rgb(11,27,52)',
    title: {
      text: aqiData.value,
      textStyle: {
        fontSize: 80,
        fontWeight: 'normal',
        color: 'rgb(124,190,255)'
      },
      x: 'center',
      y: 'center'
    },
    graphic: [
      {
        type: 'group',
        left: 'center',
        top: '80%',
        children: [
          {
            type: 'text',
            style: {
              fill: '#fff',
              text: '人流量统计',
              fontSize: 40
            }
          }
        ]
      }
    ],
    series: [
      {
        type: 'liquidFill',
        waveAnimation: 10,
        data: [0.35, 0.3],
        color: ['rgb(77,95,202)', 'rgba(79,71,183,.8)'],
        amplitude: 35,
        radius: '50%',
        backgroundStyle: {
          color: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.55,
            colorStops: [
              {
                offset: 0.5,
                color: 'rgb(11,27,52)' // 0% 处的颜色
              },
              {
                offset: 0.75,
                color: 'rgb(27,41,83)' // 100% 处的颜色
              },
              {
                offset: 0.95,
                color: 'rgb(53,63,135)' // 100% 处的颜色
              }
            ],
            globalCoord: false // 缺省为 false
          }
        },
        outline: {
          show: false
        },
        label: {
          normal: {
            formatter: ''
          }
        }
      }
    ]
  })
  // 监听窗口大小变化，自适应图表
  window.addEventListener('resize', () => {
    lineChart.resize()
    barChart.resize()
    pieChart.resize()
    lineChart1.resize()
    barChart1.resize()
    barChart2.resize()
    barChart4.resize()
    pieChart1.resize()
  })
}
</script>
<style scoped>
.top {
  width: 100%;
  height: 40px;
  display: flex;
  margin-bottom: 5%;

  .left {
    flex: 1.5;
    background: url(./images/dataScreen-header-left-bg.png) no-repeat;
    background-size: cover;

    .lbtn {
      width: 150px;
      height: 40px;
      float: right;
      background: url(./images/dataScreen-header-btn-bg-l.png) no-repeat;
      background-size: 100% 100%;
      text-align: center;
      line-height: 40px;
      color: #29fcff;
      font-size: 20px;
    }
  }

  .center {
    flex: 2;

    .title {
      width: 100%;
      height: 74px;
      background: url(./images/dataScreen-header-center-bg.png) no-repeat;
      background-size: 100% 100%;
      text-align: center;
      line-height: 74px;
      color: #29fcff;
      font-size: 30px;
    }
  }

  .right {
    flex: 1.5;
    background: url(./images/dataScreen-header-left-bg.png) no-repeat;
    background-size: cover;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .rbtn {
      width: 150px;
      height: 40px;
      background: url(./images/dataScreen-header-btn-bg-r.png) no-repeat;
      background-size: 100% 100%;
      text-align: center;
      line-height: 40px;
      color: #29fcff;
    }

    .time {
      color: #29fcff;
      font-size: 20px;
    }
  }
}

.home {
  width: 100%;
  height: 100%;
  background-color: #0c2957;

  .user-info {
    display: flex;
    align-items: center;
    height: 110px;
    margin-bottom: 280px;

    .user-img {
      width: 300px;
      height: 300px;
      border-radius: 100%;
      margin-right: 40px;
      margin-top: 180px;
      margin-left: 70px;
    }

    & li:nth-child(1) {
      font-size: 30px;
    }

    & li:nth-child(2) {
      margin-top: 10px;
      font-size: 16px;
      color: rgb(153, 153, 153);
    }
  }

  .login-info {
    font-size: 14px;
    color: rgb(153, 153, 153);

    li {
      margin: 5px;

      span {
        margin-left: 50px;
      }
    }
  }

  .table {
    margin-top: 30px;
  }

  .num {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .el-card {
      width: 32%;
      height: 90px;
      margin-bottom: 20px;
      border: none;

      i {
        width: 90px;
        height: 100%;
        line-height: 90px;
        text-align: center;
        font-size: 30px;
        color: #fff;
      }

      ul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 20px;

        li:nth-child(1) {
          font-size: 30px;
          color: #000;
          margin-bottom: 5px;
        }

        li:nth-child(2) {
          font-size: 15px;
          color: rgb(148, 148, 148);
        }
      }
    }
  }

  #line {
    width: 100%;
    height: 450px;
  }

  .el-table {
    --el-table-border-color: transparent;
    --el-table-border: none;
    --el-table-text-color: #bdbdbe;
    --el-table-header-text-color: #bdbdbe;
    --el-table-row-hover-bg-color: transparent;
    --el-table-current-row-bg-color: transparent;
    --el-table-header-bg-color: transparent;
    --el-table-bg-color: transparent;
    --el-table-tr-bg-color: transparent;
    --el-table-expanded-cell-bg-color: transparent;
  }

  #line1 {
    width: 100%;
    height: 320px;
  }

  #bar2 {
    width: 100%;
    height: 280px;
  }

  #bar4 {
    width: 100%;
    height: 280px;
  }

  .bar-pie {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;

    #pie {
      width: 100%;
      height: 280px;
    }

    #bar {
      width: 100%;
      height: 280px;
    }
  }

  .center {
    flex: 2;

    .title {
      width: 100%;
      height: 74px;
      background-size: 100% 100%;
      text-align: center;
      line-height: 74px;
      color: #29fcff;
      font-size: 30px;
    }
  }

  .bar-pie1 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    #bar1 {
      width: 100%;
      height: 280px;
    }
  }

  .bar-pie2 {
    width: 100%;
    display: flex;
    justify-content: space-between;

    #pie1 {
      width: 100%;
      height: 280px;
    }
  }
}
</style>
